<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器-01</title>
    <!-- 一般引入js文件，都是在 head 标签内部 -->
    <script src="js/jquery-3.5.1.js"></script>
    <style type="text/css">
        .container{
            width: 300px;
            height: 30px;
        }
        .first{
            background-color: red;
        }
        .second{
            background-color: aqua;
        }
        .third{
            background-color: chartreuse;
        }
        li{
            list-style: none;
            height: 10px;
        }
        *{
            font-size: 10px;
            padding: 0px;
        }
    </style>
</head>
<body>

    <div id="first" class="container first">
        <div>
            <ul id="access">
                <li>Java核心技术卷一</li>
                <li>Java核心技术卷二</li>
                <li>Java编程思想</li>
            </ul>
        </div>
    </div>

    <div id="second" class="container second">
        <div>
            <ul id="middle">
                <li>深入理解Java虚拟机</li>
                <li>Java并发编程的艺术</li>
                <li>计算机组成原理</li>
            </ul>
        </div>
    </div>

    <div id="third" class="container third">
        <div>
            <ul id="bottom">
                <li>操作系统</li>
                <li>数据结构</li>
                <li>算法</li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">

        /**
         * 全部都是选择器
         */
        // id 选择器
        let e = $("#first") ;
        console.log( e ) ;

        // class 选择器
        e = $(".container") ; // 选择到 class 属性中包含 container 值 的元素，将其封装成jQuery 实例
        console.log( e ) ;

        // 加上了过滤条件
        e = $(".container:first") ; // 选择到 class 属性中包含 container 值 的 【第一个】 元素，将其封装成jQuery 实例
        console.log( e ) ;


        // 标签选择器
        e = $("li") ;
        console.log( e ) ;

        // 组合选择器
        e = $(".first.container"); // 选择到 标签是div 并且 class 属性中包含 container 值的 元素
        console.log( e ) ;

        e = $("div.container:last"); // 选择到 标签是div 并且 class 属性中包含 container 值的 【最后一个】 元素
        console.log( e ) ;

    </script>

</body>
</html>